<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function show() {
				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						var r = xhr.responseText;
						var arr = JSON.parse(r);
						//结构字符串1.表头
						var htmlstr =
							`
		<table width="800"border="1"bordercolor="purple"align="center">
			<tr>
				<th>用户名称</th>
				<th>用户邮箱</th>
				<th>用户方式</th>
				<th>用户姓名</th>
				<th>用户性别</th>
				<th>操作</th>
			</tr>
		`;
						//结构字符串..2.循环
						for (var i = 0; i < arr.length; i++) {
							var sex = "保密";
							if (arr[i].grnder == 1) {
								sex = "男";
							} else if (arr[i].gender == 0) {
								sex = "女";
							}
							htmlstr +=
								`
	<tr>
		<td>${arr[i].uname}</td>
		<td>${arr[i].email}</td>
		<td>${arr[i].phone}</td>
		<td>${arr[i].user_name}</td>
		<td>${sex}</td>
		<td>
			<a href="search.html?uid=${arr[i].uid}">修改</a>
			<a href="javascript:del(${arr[i].uid})">删除</a>
		</td>
	</tr>
	`
						}
						//结构字符串3.表结束
						htmlstr += `</table>`
						d1.innerHTML = htmlstr
					}
				}
				//2.打开连接，创建请求
				xhr.open('get', "/pro/v1/list", true)
				//3.发送求情
				xhr.send()
			}

			function del(_uid) {
				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200)
					{
						var r = xhr.responseText;
						if (r == 1) {
							alert("删除成功！！！");
							show()
						} else {
							alert("删除失败")
						}
					}
				}
				//2.创建请求
				xhr.open("delete", `pro/v1/delete/${_uid}`, true);
				//3.发送请求
				xhr.send()
			}
		</script>
	</head>
	<body onload="show()">
		<h1>这是我的用于清单</h1>
		<div id="d1"></div>
	</body>
</html>
